<template>
	<view
		class="card-warp"
		@click="goToCardPage"
	>
		<view class="card-box">
			<view class="card-img">
				<u-image
					width="100%"
					:src="src"
					@load="loadSuccess"
					@error="loadSuccess"
					v-if="!isManyImg"
				></u-image>
				<!-- 轮播图 -->
				<u-swiper
					:list="sipwerImg"
					@change="change"
					@click="click"
					:autoplay="false"
					indicatorMode="dot"
					v-if="isManyImg"
					circular
				></u-swiper>
			</view>
			<view class="card-title">
				<CardTitleVue :title="cardData.title" />
			</view>
			<view class="card-bottom">
				<UserDataVue
					:author="cardData.author"
					:avatarImg="cardData.author.avatar"
				></UserDataVue>
				<LikeVue :likeCount="cardData.like"></LikeVue>
			</view>
		</view>
	</view>
</template>

<script>
import CardTitleVue from './CardTitle.vue';
import LikeVue from './Like.vue';
import UserDataVue from './UserData.vue';

import { getCardTitle } from '@/common/api/cardApi.js';
export default {
	name: 'Card',
	data() {
		return {
			src: '',
			sipwerImg: []
		};
	},
	computed: {
		//计算是否是多图，如果是多图就在卡片里显示一个轮播图
		isManyImg() {
			if (this.cardData.images.length > 1) {
				//是多图
				this.sipwerImg = this.cardData.images;
				return true;
			} else {
				this.src = this.cardData.images[0];
				console.log(this.src);
				return false;
			}
		}
	},
	props: {
		title: {
			type: String
		},
		cardData: {
			type: Object
		}
	},
	components: {
		CardTitleVue,
		UserDataVue,
		LikeVue
	},
	methods: {
		goToCardPage() {
			uni.navigateTo({
				url: `/pages/card-page/card-page?id=${this.cardData._id}`
			});
		},
		loadSuccess() {
			console.log('加载成功了已经');
			uni.$emit('hideLoading');
		},
		change() {},
		click() {}
	},

	mounted() {}
};
</script>

<style lang="scss">
.card-warp {
	width: 100%;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	height: auto;
	display: flex;
	// display: block;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
	margin-top: 10rpx;
	transition: 0.3s;
	.card-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		.card-img {
			width: 155px;
			border-radius: 5px;
			overflow: hidden;
			margin-top: 10rpx;
			transition: 0.5s;
		}

		.card-title {
			width: 95%;
			height: 40px;
		}
		.card-bottom {
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}
</style>
